// 设置界面模块
const SettingsView = {
  // 渲染设置界面
  render: function(ctx, width, height, settings) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 绘制背景
    ctx.fillStyle = '#f5f5f5';
    ctx.fillRect(0, 0, width, height);
    
    // 绘制标题
    ctx.fillStyle = '#2C3E50';
    ctx.font = `bold ${24 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('游戏设置', width / 2, 80 * scaleFactor);
    
    // 设置项位置和样式
    const itemWidth = width * 0.8;
    const itemHeight = 50 * scaleFactor;
    const itemX = (width - itemWidth) / 2;
    let itemY = 150 * scaleFactor;
    const toggleWidth = 60 * scaleFactor;
    const toggleHeight = 30 * scaleFactor;
    
    // 绘制设置项
    const settingsItems = [
      { key: 'soundEnabled', label: '音效' },
      { key: 'vibrationEnabled', label: '震动' },
      { key: 'musicEnabled', label: '背景音乐' },
      { key: 'autoStart', label: '自动开始下一局' }
    ];
    
    settingsItems.forEach((setting, index) => {
      // 绘制背景
      ctx.fillStyle = index % 2 === 0 ? '#ffffff' : '#f8f9fa';
      ctx.fillRect(itemX, itemY, itemWidth, itemHeight);
      
      // 绘制标签
      ctx.fillStyle = '#2C3E50';
      ctx.font = `${16 * scaleFactor}px Arial`;
      ctx.textAlign = 'left';
      ctx.fillText(setting.label, itemX + 30 * scaleFactor, itemY + itemHeight / 2 + 6 * scaleFactor);
      
      // 绘制开关
      const toggleX = itemX + itemWidth - toggleWidth - 30 * scaleFactor;
      const toggleY = itemY + (itemHeight - toggleHeight) / 2;
      const radius = 15 * scaleFactor;
      
      // 开关背景
    ctx.beginPath();
    ctx.moveTo(toggleX + radius, toggleY);
    ctx.lineTo(toggleX + toggleWidth - radius, toggleY);
    ctx.quadraticCurveTo(toggleX + toggleWidth, toggleY, toggleX + toggleWidth, toggleY + radius);
    ctx.lineTo(toggleX + toggleWidth, toggleY + toggleHeight - radius);
    ctx.quadraticCurveTo(toggleX + toggleWidth, toggleY + toggleHeight, toggleX + toggleWidth - radius, toggleY + toggleHeight);
    ctx.lineTo(toggleX + radius, toggleY + toggleHeight);
    ctx.quadraticCurveTo(toggleX, toggleY + toggleHeight, toggleX, toggleY + toggleHeight - radius);
    ctx.lineTo(toggleX, toggleY + radius);
    ctx.quadraticCurveTo(toggleX, toggleY, toggleX + radius, toggleY);
    ctx.closePath();
    ctx.fillStyle = settings[setting.key] ? '#4CAF50' : '#e0e0e0';
    ctx.fill();
      
      // 开关滑块
      ctx.beginPath();
      ctx.arc(
        settings[setting.key] ? toggleX + toggleWidth - radius : toggleX + radius,
        toggleY + toggleHeight / 2,
        12 * scaleFactor,
        0,
        2 * Math.PI
      );
      ctx.fillStyle = 'white';
      ctx.fill();
      
      itemY += itemHeight;
    });
    
    // 返回按钮
    const btnWidth = 200 * scaleFactor;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    const btnY = itemY + 50 * scaleFactor;
    const btnRadius = 25 * scaleFactor;
    
    ctx.beginPath();
    ctx.moveTo(btnX + btnRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnRadius);
    ctx.lineTo(btnX, btnY + btnRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnRadius, btnY);
    ctx.closePath();
    const gradient = ctx.createLinearGradient(btnX, btnY, btnX + btnWidth, btnY);
    gradient.addColorStop(0, '#4A90E2');
    gradient.addColorStop(1, '#357ABD');
    ctx.fillStyle = gradient;
    ctx.fill();
    
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('返回', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
  },
  
  // 检查按钮点击
  checkButtonClick: function(touchX, touchY, width, height) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 设置项位置和样式
    const itemWidth = width * 0.8;
    const itemHeight = 50 * scaleFactor;
    const itemX = (width - itemWidth) / 2;
    let itemY = 150 * scaleFactor;
    const toggleWidth = 60 * scaleFactor;
    const toggleHeight = 30 * scaleFactor;
    
    // 检查设置项点击
    const settingsItems = ['soundEnabled', 'vibrationEnabled', 'musicEnabled', 'autoStart'];
    
    for (let i = 0; i < settingsItems.length; i++) {
      const toggleX = itemX + itemWidth - toggleWidth - 30 * scaleFactor;
      const toggleY = itemY + (itemHeight - toggleHeight) / 2;
      
      if (touchX >= toggleX && touchX <= toggleX + toggleWidth && 
          touchY >= toggleY && touchY <= toggleY + toggleHeight) {
        return { type: 'toggle', key: settingsItems[i] };
      }
      
      itemY += itemHeight;
    }
    
    // 检查返回按钮
    const btnWidth = 200 * scaleFactor;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    const btnY = itemY + 50 * scaleFactor;
    
    if (touchX >= btnX && touchX <= btnX + btnWidth && 
        touchY >= btnY && touchY <= btnY + btnHeight) {
      return { type: 'back' };
    }
    
    return null;
  }
};

module.exports = SettingsView;